<template>
    <view class="container">
        <div class="border">
            <div class="border-content">
                <div style="height: 10px;"></div>
                <div class="top-line">
                    <div class="line"></div>
                    <div style="width: 10px;"></div>
                    <div style="color: #1A512C;">报停信息填报</div>
                </div>
                <div style="height: 10rpx;"></div>
                <!-- 表单 -->
                <div style="color: #718778;">
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">日期</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ date }}
                            <div style="height: 5rpx;"></div>

                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">时间</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ time }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">司机</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ obj.driverName }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">收运车</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ obj.licenseNumber }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">报停原因</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ obj.faultCause }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">报停时长</div>
                        <div style="display: flex;align-items: center;width: 70%;">
                            <div class="borders-min" style="width: 60%;">
                                <div style="height: 5rpx;"></div>
                                {{ obj.faultDuration }}
                                <div style="height: 5rpx;"></div>
                            </div>
                            <div style="width: 5px;"></div>
                            <div class="borders-min" style="width: 40%;">
                                <div style="height: 5rpx;"></div>
                                {{ obj.faultDurationUnit }}
                                <div style="height: 5rpx;"></div>
                            </div>
                        </div>
                    </div>

                    <div style="height: 10px;"></div>
                </div>
                <div>
                    <div style="width: 30%;color: #1A512C;font-weight: 500;">现场照片</div>
                    <div style="height: 5px;"></div>
                    <div style="display: flex;align-items: center;justify-content: space-between;">
                        <div>
                            <image
                                :src="base+img1"
                                mode="widthFix" style="width: 150px;height: 150px;"></image>
                        </div>
                       <div>
                            <image
                                :src="base+img2"
                                mode="widthFix" style="width: 150px;height: 150px;"></image>
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </view>
</template>
<script>
import { look } from '../api/api';
// import request from '../../pagesCopy/common/request';
import request from '../../common/request';
export default {
    data() {
        return {
            obj: {},
            date: '',
            time: '',
            img1:'',
            img2:'',
            request:request,
            base:''
        }
    },
    methods: {

    },
    onShow() {
        look({
            vehicleId: uni.getStorageSync('vehicleId')
        }).then(res => {
            console.log(res.data);
            this.obj = res.data.data[0];
            console.log(this.obj);
            // 使用空格分割日期和时间部分
            let parts = this.obj.faultTime.split(' ');
            this.date = parts[0];
            this.time = parts[1];
            let imgs = this.obj.scenePhoto.split(',');
            this.img1 = imgs[0];
            this.img2 = imgs[1]
        })
        console.log(this.request.config.baseURL);
        this.base = this.request.config.baseURL;
    }
}
</script>
<style lang="scss">
.container {
    background: #394E36;

    .border {
        border-radius: 10px;
        background: #E3EDE2;
        height: 100vh;
        overflow-y: scroll;

        .border-content {
            width: 90%;
            margin-left: 5%;
        }
    }
}

.top-line {
    display: flex;
    align-items: center;
}

.line {
    background: #1A512C;
    width: 7rpx;
    height: 35rpx;
}

.form-flex {
    display: flex;
    align-items: center;
    width: 100%;
}

.borders {
    border: 1px solid #1A512C;
    border-radius: 5px;
    text-align: center;
    width: 70%;
}

.borders-min {
    border: 1px solid #1A512C;
    border-radius: 5px;
    text-align: center;
}

.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.button-footer {
    width: 48%;
    height: 50px;
    background: #46A164;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    border-radius: 10px;
}

.top {
    width: 224rpx;
    height: 224rpx;
    margin: 0 auto;
    margin-bottom: 50rpx;
    margin-top: 50rpx;
    border: 1px solid red;

    image {
        width: 224rpx;
        height: 224rpx;
        border-radius: 50%;
    }

    .tips {
        font-size: 28rpx;
    }
}
</style>